<template>
	<view class="shopingCart">
		<!-- 购物车中按店铺划分商品 -->
		<view class="cartItem" v-for="(shopItem, shopIndex) in shopList" :key="shopItem.shopId">
			<!-- 购物车订单项中的店铺名字所在的区域-->
			<view class="cartItem-shopTitle">
				<radio class="shop-radio" :checked="shopItem.selected" @click="shopRadioClick(shopIndex)"/>{{shopItem.title}}
			</view>
			<!-- 购物车订单项中店铺中的商品类 -->
			<view class="shop-goods-item" v-for="(goodsItem,goodsIndex) in shopItem.goodsList" :key="goodsItem.goodsId">	
				<radio class="goods-radio" :checked="goodsItem.selected" @click="goodsRadioClick(shopIndex, goodsIndex)" />
				<image :src="goodsItem.img" mode=""></image>
				<!-- 商品项中的信息 -->
				<view class="goods-item-right">
					<view class="goods-name">{{goodsItem.name}}</view>
					<view class="goods-message">{{goodsItem.spec_key_name}}</view>
					<view class="goods-buy">
						<view class="goods-price">￥{{goodsItem.price * goodsItem.number}}</view>
						<view class="goods-numberBox">
							<view class="goods-minus" @click="goodsMinus(shopIndex,goodsIndex)">-</view>
							<view class="goods-number"><input type="number" disabled v-model="goodsItem.number"/></view>
							<view class="goods-add" @click="goodsAdd(shopIndex,goodsIndex)">+</view>
						</view>
					</view>	
				</view>
			</view>
		</view>
		<!-- 购物车的结算 -->
		<view class="settle">
			<radio class="settle-radio"  @click="settleRadioClick" :checked="settleRadioSelected"/>全选
			<view class="settle-total">
				合计:￥<input type="text" :value="settleTotlePrice" class="total-price" disabled>
			</view>
			<view class="settle-button">
				<button class="del-goods">删除</button>
				<button class="totle-goods">结算({{settleTotleNumber}})</button>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import lcNumberBox from '../../components/lc-number-box/lc-numberBox.vue';
	export default {
		components: {lcNumberBox},
		data() {
			return {
				flag:false,
				settleRadioSelected:false,
				settleTotlePrice:0,
				settleTotleNumber:0,
				shopList:[
					{   
						shopId: 1,
						title: "天猫超市",						
						selected:false,
						goodsList:[
							{
								goodsId: 236,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 19,
								number: 1,
								selected:false,
							},
							{
								goodsId: 255,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 22,
								number: 1,
								selected:false,
							},
							{
								goodsId: 237,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 19,
								number: 1,
								selected:false,
							},
						]
					},
					{
						shopId: 2,
						title: "苏宁超市",						
						selected:false,
						goodsList:[
							{
								goodsId: 238,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 19,
								number: 1,
								selected:false,
							},
							{
								goodsId: 287,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 61,
								number: 1,
								selected:false,
							},
						]
					},
					{
						shopId: 3,
						title: "黑马超市",						
						selected:false,
						goodsList:[
							{
								goodsId: 338,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 50,
								number: 1,
								selected:false,
							},
							{
								goodsId: 387,
								gid: 47,
								name: "毛巾（厚）",
								img: "https://xthotel.palmbly.com/uploads/images/20201020/fb54b8d699c646908fde0af12def5a5b.png",
								spec_key_name: "尺寸:M 颜色:黑色",
								price: 50,
								number: 1,
								selected:false,
							},
						]
					},
				],
				
			}
		},
		methods: {
			/* 商店按钮的点击*/
			shopRadioClick(shopIndex){
				//商铺按钮被点击但还没有改变按钮状态为true的时候，计算总价钱和总数量
				this.shopList[shopIndex].goodsList.forEach((goodsItem, goodsIndex)=>{
					if(goodsItem.selected === false){
						 this.settleTotlePrice = this.settleTotlePrice + this.computeGoodsPrice(shopIndex,goodsIndex)
						 this.settleTotleNumber = this.settleTotleNumber + this.computeGoodsnumber(shopIndex,goodsIndex)
					}
				})
				//相应的该店铺下的全部商品要同时被点击 
				this.shopList[shopIndex].selected = !this.shopList[shopIndex].selected				
				this.shopList[shopIndex].goodsList.forEach((goodsItem)=>{
					goodsItem.selected = this.shopList[shopIndex].selected
				})
				// 当店铺的按钮被点击时，计算这个商铺里的所有物品的价格 
				if(this.shopList[shopIndex].selected === false){
					this.settleRadioSelected = false   //全选按钮要取消掉
					this.settleTotlePrice = this.settleTotlePrice - this.computeShopPrice(shopIndex)  //总价减少
					this.settleTotleNumber = this.settleTotleNumber - this.computeShopNumber(shopIndex) //总量减少
				}
				//当店铺的按钮被点击时，判断全选按钮是否需要全选按钮被点击
				this.settleRadioSelected = this.isAllRadioSelected()
			},
			/* 商店中商品的按钮被点击 */
			goodsRadioClick(shopIndex, goodsIndex){
				let shopSelectedNumber = 0
				this.shopList[shopIndex].goodsList[goodsIndex].selected = !this.shopList[shopIndex].goodsList[goodsIndex].selected
				if(this.shopList[shopIndex].goodsList[goodsIndex].selected === false){
					this.shopList[shopIndex].selected = false //商店的按钮要取消掉
					this.settleRadioSelected = false   //全选按钮要取消掉
					this.settleTotlePrice = this.settleTotlePrice - this.computeGoodsPrice(shopIndex, goodsIndex)  //商店中商品被点击时总价的加减
					this.settleTotleNumber = this.settleTotleNumber - this.shopList[shopIndex].goodsList[goodsIndex].number
				}else{
					//当商店的商品按钮状态selected=true的数量等于该商店商品的数量的时候商店的按钮改为被点击状态
					this.shopList[shopIndex].goodsList.forEach((goodsItem)=>{				
						if(goodsItem.selected === true){		
							shopSelectedNumber++
							if(shopSelectedNumber === this.shopList[shopIndex].goodsList.length){
								this.shopList[shopIndex].selected = true
							}
						}
					})
					this.settleTotlePrice = this.settleTotlePrice + this.computeGoodsPrice(shopIndex, goodsIndex)  //商店中商品被点击时总价的加减
					this.settleTotleNumber = this.settleTotleNumber + this.shopList[shopIndex].goodsList[goodsIndex].number
				}	
				//当店铺中的商品的按钮被点击时，判断全选按钮是否需要全选按钮被点击
				this.settleRadioSelected = this.isAllRadioSelected()
				
			},
			/* 商品数量的加减 */
			goodsMinus(shopIndex,goodsIndex){
				// 商品数量最小值为0
				if(this.shopList[shopIndex].goodsList[goodsIndex].number === 1) return uni.showToast({title:"傻逼邱荣华没看到是1，不能再减少了嘛",icon:"loading"})
				this.shopList[shopIndex].goodsList[goodsIndex].number--
				if(this.shopList[shopIndex].goodsList[goodsIndex].selected === true){
					this.settleTotlePrice = this.settleTotlePrice - this.shopList[shopIndex].goodsList[goodsIndex].price
					this.settleTotleNumber = this.settleTotleNumber - 1
				}
			},
			goodsAdd(shopIndex,goodsIndex){
				// 商品数量最大值999
				if(this.shopList[shopIndex].goodsList[goodsIndex].number === 999) return uni.showToast({title:"该商品不能再增加了",icon:"loading"})
				this.shopList[shopIndex].goodsList[goodsIndex].number++
				if(this.shopList[shopIndex].goodsList[goodsIndex].selected === true){
					this.settleTotlePrice = this.settleTotlePrice + this.shopList[shopIndex].goodsList[goodsIndex].price
					this.settleTotleNumber = this.settleTotleNumber + 1
				}
			},
			/* 全选按钮被点击 */
			settleRadioClick(){
				this.settleRadioSelected = !this.settleRadioSelected
				//全选按钮被点击时，商店和商店中商品的按钮要同步被点击 
				this.shopList.forEach((shopItem)=>{
					shopItem.selected = this.settleRadioSelected		
					shopItem.goodsList.forEach((goodsItem)=>{
						goodsItem.selected =  this.settleRadioSelected
					})
				})	
				if(this.settleRadioSelected === true){
					this.settleTotlePrice = this.computeTotlePrice
					this.settleTotleNumber = this.computeTotleNumber
				}else{
					this.settleTotlePrice = 0
					this.settleTotleNumber = 0
				}
			},
			/* 判断是否所有的按钮都被点击 */
			isAllRadioSelected(){
				let shopRadioSelectedNumber = 0   //商店的按钮被点击的数量
				this.shopList.forEach((shopItem)=>{
					if(shopItem.selected === true){
						shopRadioSelectedNumber++
					}
				})	
				if(shopRadioSelectedNumber === this.shopList.length){
					return true
				}
				return false
			}
		},
		computed:{
			/* 1.计算总价格，2.总数量，3.按商店计算总价 4.计算商品总价*/
			computeTotlePrice:function(){
				let settleSumPrice = 0
				this.shopList.forEach((shopItem)=>{
					let shopSumPrice = 0
					shopItem.goodsList.forEach((goodsItem)=>{
						shopSumPrice = shopSumPrice + goodsItem.number * goodsItem.price
					})
					settleSumPrice = settleSumPrice + shopSumPrice
				})
				return settleSumPrice
			},
			computeTotleNumber:function(){
				let totalGoodsNumber = 0
				this.shopList.forEach((shopItem)=>{
					shopItem.goodsList.forEach((goodsItem)=>{
						totalGoodsNumber =  totalGoodsNumber + goodsItem.number
					})
				})
				return totalGoodsNumber
			},
			computeShopPrice:function(){
				return function(shopIndex){
					let shopSumPrice = 0
					this.shopList[shopIndex].goodsList.forEach((goodsItem)=>{
						shopSumPrice = shopSumPrice + goodsItem.number * goodsItem.price
					})
					return shopSumPrice
				}
			},
			computeShopNumber:function(){
				return function(shopIndex){
					let shopSumNumber = 0
					this.shopList[shopIndex].goodsList.forEach((goodsItem)=>{
						shopSumNumber = shopSumNumber + goodsItem.number
					})
					return shopSumNumber
				}
			},
			computeGoodsPrice:function(){
				return function(shopIndex, goodsIndex){
					return this.shopList[shopIndex].goodsList[goodsIndex].number * this.shopList[shopIndex].goodsList[goodsIndex].price
				}
			},
			computeGoodsnumber:function(){
				return function(shopIndex, goodsIndex){
					return this.shopList[shopIndex].goodsList[goodsIndex].number
				}
			}
		},
			
	}
	
</script>

<style lang="scss">
	$themeColor: rgb(87, 208, 127);
	radio{
		transform:scale(0.9)
	}
	page{
		height: 100%;
		width: 100%;
		background:#e6e6e6;
		.shopingCart{
			width: 100%;
			padding: 20rpx;
			margin-bottom: 80rpx;
			box-sizing: border-box;
			.cartItem{
				width: 100%;
				background-color: #fff;
				border-radius: 10rpx;
				margin-bottom: 30rpx;
				/* height: 500rpx; */
				.cartItem-shopTitle{
					border-bottom: 3rpx solid #e6e6e6;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 33rpx;
					font-weight: bold;
					.shop-radio{
						margin-left: 20rpx;						
					}
				}
				.shop-goods-item{
					width: 100%;
					height: 240rpx;
					display: flex;
					border-bottom: 3rpx solid #e6e6e6;
					.goods-radio{
						margin-left: 20rpx;	
						line-height: 240rpx;
					}
					image{
						display: block;
						border-radius: 20rpx;
						width: 190rpx;
						height: 190rpx;
						margin: 25rpx 10rpx 25rpx 5rpx;
					}
					.goods-item-right{
						width: 420rpx;
						padding: 40rpx 0 40rpx 5rpx;
						font-size: 32rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.goods-message{
							font-size:30rpx ;
							color:#acacac;
						}
						.goods-buy{
							width: 90%;
							display: flex;
							justify-content: space-between;
							.goods-price{	
								font-size: 40rpx;
								color: red;
							}
							.goods-numberBox{
								display: flex;
								justify-content: space-between;
								width: 180rpx;
								line-height: 45rpx;
								.goods-minus,.goods-add{
									border-radius:60rpx;
									border: 4rpx solid $themeColor;
									width: 45rpx;
									height: 45rpx;
									text-align: center;
									color:$themeColor;
								}
								.goods-number{
									input{
										display: block;
										width: 90rpx;
										text-align: center;
									}
								}
							}
						}
					}
				}
			}
			.settle{
				z-index: 100;
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				position: fixed;
				/* hihi */
				bottom: 0rpx;
				left: 0;
				background-color: #ffffff;
				border-top:3rpx solid #e6e6e6;
				font-size: 28rpx;
				display: flex;
				.settle-radio{
					margin-left: 40rpx;
				}
				.settle-total{
					display: flex;
					margin-left: 30rpx;
					.total-price{
						width:170rpx ;
						height: 100rpx;
						line-height: 100rpx;
						font-size: 40rpx;
						color: red;
						font-weight: bold;
					}
				}
				.settle-button{
					display: flex;
					position: absolute;
					right: 0;
					height: 100%;
					button{
						border-radius: 0;
						color: #ffffff;
						font-size: 	30rpx;
						width: 160rpx;
						height: 100%;
						line-height: 100rpx;
						background-color: #ec0000;
					}
					button:nth-child(2){
						background-color: #2e863d;
						width: 180rpx;
					}
					.button-hover{
						opacity: 0.6;
					}					
				}			
			}			
		}
	}
</style>
